<template>
	<view class="order-container">
		<!-- 日期显示 -->
		<!-- <view class="date-header">{{ formattedDate }}</view> -->

		<!-- 统计卡片 -->
		<view class="stats-grid">
			<view v-for="item in stats" :key="item.mealType" class="stat-card">
				<!-- 餐型标题 -->
				<view class="meal-type">{{ item.mealType }}</view>

				<!-- 数据指标 -->
				<view class="metrics-grid">
					<!-- 总人数 -->
					<view class="metric-item total">
						<text class="label">总人数</text>
						<text class="value">{{ item.totalOrders }}</text>
					</view>

					<!-- 状态指标 -->
					<view class="status-row">
						<view class="metric-item danger" @click="showDetail(item.mealType, '已报餐')">
							<text class="label">未领取</text>
							<text class="value">{{ item.notReceivedCount }}</text>
						</view>
						<view class="metric-item success">
							<text class="label">已领取</text>
							<text class="value">{{ item.receivedCount }}</text>
						</view>
						<view class="metric-item info" @click="showDetail(item.mealType, '临时餐')">
							<text class="label">临时餐</text>
							<text class="value">{{ item.tempMealCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="detailPopup" type="bottom" background-color="#fff">
			<view class="popup-container">
				<!-- 弹窗标题 -->
				<view class="popup-header">
					<text class="title">{{ popupTitle }}</text>
					<uni-icons type="close" size="24" @click="closeDetail" class="close-btn" />
				</view>

				<!-- 滚动内容区域 -->
				<scroll-view scroll-y class="user-list">
					<view v-for="(user,index) in detailList" :key="index" class="user-item">
						<text class="user-name">{{ user.nickName }}</text>
						<text class="dept">{{ user.deptName }}</text>
						<text class="id">({{ user.userName }})</text>
					</view>

					<!-- 空状态提示 -->
					<view v-if="detailList.length === 0" class="empty-tip">
						暂无相关用餐记录
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		getDaliyOrderNumber,
		getMealDetails
	} from '@/api/order/ordering.js';
	export default {
		data() {
			return {
				stats: [],
				dateInt: null,
				timer: null,
				detailList: [], // 详情数据
				popupTitle: '' // 弹窗标题
			}
		},
		created() {
			const today = new Date();
			this.dateInt = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
			this.loadStats(this.dateInt);
			this.timer = setInterval(() => {
				this.loadStats(this.dateInt);
			}, 3000); // 每3秒执行一次
		},
		beforeDestroy() {
			// 页面卸载时清除定时器
			clearInterval(this.timer);
		},

		methods: {
			async loadStats(dateInt) {
				try {
					const res = await getDaliyOrderNumber(dateInt);
					if (res.code === 200) {
						this.stats = res.data;
					}
				} catch (error) {
					console.error('获取报餐统计失败', error);
				}
			},
			async showDetail(mealType, status) {
				try {
					uni.showLoading({
						title: '加载中...'
					})

					const res = await getMealDetails(
						this.dateInt,
						mealType,
						status === '临时餐' ? '临时用餐' : status
					)

					if (res.code === 200) {
						this.detailList = res.data
						this.popupTitle = `${mealType} - ${status}（${res.data.length}人）`
						this.$refs.detailPopup.open()
					}
				} catch (error) {
					console.error('获取详情失败', error)
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			closeDetail() {
				this.$refs.detailPopup.close()
				this.detailList = []
			}
		}

	}
</script>

<style lang="scss">
	.order-container {
		padding: 20rpx;
		background: #f5f7fa;
	}

	.date-header {
		font-size: 32rpx;
		color: #606266;
		padding: 24rpx;
		text-align: center;
		background: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.stats-grid {
		display: grid;
		gap: 20rpx;
	}

	.stat-card {
		background: white;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.meal-type {
			font-size: 36rpx;
			font-weight: 600;
			color: #303133;
			margin-bottom: 24rpx;
			border-bottom: 2rpx solid #eee;
			padding-bottom: 16rpx;
		}
	}

	.metrics-grid {
		display: grid;
		gap: 20rpx;

		.total {
			.value {
				color: #409eff;
				font-size: 42rpx;
			}
		}
	}

	.status-row {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.metric-item {
		transition: all 0.3s;
		cursor: pointer;

		&:active {
			transform: scale(0.95);
		}

		&:hover {
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		flex: 1;
		text-align: center;
		padding: 20rpx;
		border-radius: 12rpx;

		.label {
			display: block;
			font-size: 24rpx;
			color: #909399;
			margin-bottom: 8rpx;
		}

		.value {
			display: block;
			font-size: 36rpx;
			font-weight: 600;
		}

		&.success {
			background: #f0f9eb;
			color: #67c23a;
		}

		&.danger {
			background: #fef0f0;
			color: #f56c6c;
		}

		&.info {
			background: #f4f4f5;
			color: #909399;
		}

		&.total {
			background: #ecf5ff;
		}
	}

	.popup-container {
		padding: 40rpx;
		max-height: 70vh;
		display: flex;
		flex-direction: column;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.close-btn {
				padding: 16rpx;
				color: #999;
			}
		}

		.user-list {
			flex: 1;
			/* 使用flex代替固定高度 */
			overflow: scroll;
			/* 关键：显式声明滚动行为 */
			margin-top: 24rpx;
			height: 50vh;

			.user-item {
				padding: 24rpx 0;
				border-bottom: 1rpx solid #f5f5f5;
				display: flex;
				align-items: center;

				.user-name {
					font-size: 28rpx;
					color: #333;
					margin-right: 16rpx;
				}

				.dept {
					font-size: 24rpx;
					color: #666;
					flex: 1;
				}

				.id {
					font-size: 24rpx;
					color: #999;
				}
			}

			.empty-tip {
				text-align: center;
				color: #999;
				padding: 48rpx 0;
			}
		}
	}
</style>